<template>
  <section class="wrapper">
    <myHeader :obj="myObj" @events="events"></myHeader>
    <main>
      <subject>
        <span slot="title">{{listDate.Title}}</span>
        <span slot="type">一对一约见</span>
        <span slot="money">{{listDate.Money?listDate.Money.toFixed(2):"1000"}}</span>
      </subject>
      <myProgress :level="level"></myProgress>
      <myBigIcon :bigpic="this.loginData[1].OpenId==listDate.ExpertOpenId?listDate.HeadUrl:listDate.ExpertHeadUrl"></myBigIcon>
      <myField2 :information="information"></myField2>
      <div v-if="!listDate.Enddo">
        <div class="infoWrap_0310 agree_0312" v-if="this.$route.query.state == 3">已支付</div>
        <div class="infoWrap_0310 agree_0312" v-else-if="this.$route.query.exper">等待用户支付</div>
        <div class="infoWrap_0310 agree_0312" @click="payorder" v-else>同意并支付</div>
        <myButton @sendDate="cancel(num)" v-if="!listDate.Enddo">取消约见</myButton>
      </div>
      <div v-else>
        <div class="infoWrap_0310 agree_0312" >订单已关闭</div>
      </div>
    </main>
  </section>
</template>
<script>
import myHeader from './base/myHeader';
import myProgress from './base/myProgress';
import myButton from './base/myButton';
import myField2 from './base/myField2';
import myBigIcon from './base/myBigIcon';
import subject from './base/subject';
import hgjSkip from '../assets/js/hgjSkip';
import API from '../assets/js/asktoses';
import { fetch,payUrl } from '../assets/api';
import axios from 'axios';
export default {
  data () {
    return {
      myObj: {
        type: 2,
        text: '约见详情'
      },
      level: 2,
      information:[
        {
          title:"行家",
          des:"nana",
          inputs:false
        },
        {
          title:"开始时间",
          des:"2018-04-12",
          inputs:false
        },
        {
          title:"结束时间",
          des:"2018-04-12",
          inputs:false
        },
        {
          title:"联系电话",
          des:"暂无填写",
          inputs:false
        },
        {
          title:"约见地点",
          des:"广州番禺",
          inputs:false
        },
        {
          title:"订单号",
          des:"55555555555555555",
          inputs:false
        },
      ],
      listDate:{},
      num:this.$route.query.AppointmentOrderNo,
      loginData:null,
      toUrl:"",
    }
  },
  created() {
    hgjSkip.skip().then(res =>{
      this.loginData = res;
      this.experinformation();
      this.toUrl = this.encode(location.href);
    });
  },
  methods: {
    events(i) {
      if(i == 2) {
        history.back();
      }
    },
    cancel(num){
      this.$router.push({path:"abolish",query:{AppointmentOrderNo:num,exper:this.$route.query.exper}})
    },
    //创建支付订单
    async payorder(){
      const res = await fetch(API.getcreatpayorder,{
        ...this.loginData[1],
        AppointmentOrderNo:this.num,
      });
      let data = res.Result;
      setTimeout(() => {
         let str = '?';
        str +='appid='+ data.AppId; // 应用Id
        str +='&channel_code='+ data.ChannelCode;   // 销售渠道码,一般为会管家平台传递给应用的展会识别码
        str +='&pay_userid='+ data.PayUserId; //data.Result.PayUserId;  // 购买应用的会管家平台用户ID
        str +='&out_order_no='+ data.DealOrderNo; // 订单编号,必须保证唯一,回调将回传
        str +='&subject='+ data.Subject;    // 商品名称
        str +='&total_fee='+ data.TotalFee;// data.Result.TotalFee;  // 商品的价格,以分为单位,比如一元传 100
        str +='&subjectdec='+ data.Subjectdec; // 商品的描述
        str +='&CustomStr='+ data.CustomStr; // 客户自带参数,支付原样返回
        str +='&sign='+ data.Sig;    // 签名
        str +='&Notifyurl='+ this.toUrl; // 支付成功同步跳转地址,使用 urlencode 加密,不传则会跳转至应用配置地址
        window.location.href = payUrl+str;
      }, 1000);
      window.location.reload();
    },
    //获取行家信息
    async experinformation(){
      const res = await fetch(API.getOrderList,{
        ...this.loginData[1],
        AppointmentOrderNo:this.num
      });
      this.listDate = res.Result;
      this.information = [
        {
          title:"行家",
          des:this.loginData[1].OpenId==this.listDate.ExpertOpenId?this.listDate.Name:this.listDate.ExpertName,
          inputs:false
        },
        {
          title:"开始时间",
          des:this.listDate.SMeetUpTime?this.listDate.SMeetUpTime:"行家取消",
          inputs:false
        },
        {
          title:"结束时间",
          des:this.listDate.EMeetUpTime?this.listDate.EMeetUpTime:"行家取消",
          inputs:false
        },
        {
          title:"联系电话",
          des:this.loginData[1].OpenId==this.listDate.ExpertOpenId?this.listDate.AppointmentPhone:this.listDate.Phone,
          inputs:false
        },
        {
          title:"约见地点",
          des:this.listDate.Location?this.listDate.Location:"行家取消",
          inputs:false
        },
        {
          title:"订单号",
          des:this.listDate.AppointmentOrderNo,
          inputs:false
        },
      ]
    },
    encode(str) {
      return encodeURIComponent(str)
    }
  },
  components: {
    myHeader,
    myProgress,
    myButton,
    myField2,
    myBigIcon,
    subject
  }
}

</script>
<style lang="less">
 .wrapper {
   width: 3.75rem;
   height: 100%;
   main {
    width: 3.75rem;
    height: 100%;
    padding-top: .44rem;
    padding-bottom: .1rem;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    .agree_0312 {
      font-size: .2rem;
      color: #555555;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0!important;
      margin-bottom: .17rem;
    }
    .infoWrap_0310 {
      width: 100%;
      height: .43rem;
      padding-left: .15rem;
      box-sizing: border-box;
      background: white;
      border-top: .01rem solid #E5E5E5;
    }
  }

}
  
</style>
